<template>
  <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" class="my-4" @click="openDetail"> 添加商品 </a-button>
        <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
        <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'statusName'">
          <span
            :style="{
              color: column.key === 'statusName' && record.status === 1 ? 'green' : 'red',
            }"
          >
            {{ record.statusName }}
          </span>
        </template>
        <template v-if="column.key === 'name'">
          <img :src="hotImg" style="width: 25px" v-if="record.hot" />
          <img :src="speImg" style="width: 22px; margin-right: 2px" v-if="record.spe" />
          <a @click="openDetail(record)">{{ record.name }}</a>
        </template>
        <template v-else-if="column.key === 'imgList'">
          <TableImg :size="60" :simpleShow="true" :imgList="text" />
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :dropDownActions="[
              {
                label: '删除',
                popConfirm: {
                  title: '是否删除？',
                  confirm: handleDelete.bind(null, record),
                },
              },
              {
                label: '设为热门',
                popConfirm: {
                  title: '是否设为热门？',
                  confirm: setHot.bind(null, 1, record.id),
                },
                ifShow: () => {
                  return !record.hot;
                },
              },
              {
                label: '取消热门',
                popConfirm: {
                  title: '是否取消热门？',
                  confirm: cancelHot.bind(null, 1, record.id),
                },
                ifShow: () => {
                  return record.hot;
                },
              },
              {
                label: '设为特色',
                popConfirm: {
                  title: '是否设为特色？',
                  confirm: setHot.bind(null, 3, record.id),
                },
                ifShow: () => {
                  return !record.spe;
                },
              },
              {
                label: '取消特色',
                popConfirm: {
                  title: '是否取消特色？',
                  confirm: cancelHot.bind(null, 3, record.id),
                },
                ifShow: () => {
                  return record.spe;
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <DrawerGoodsDetail @register="registerGoodsDetail" @call-parent-save-suc="saveSuc" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, BasicColumn, TableImg, TableAction } from '@/components/Table';
  import hotImg from '@/assets/images/hot.png';
  import speImg from '@/assets/images/spe.png';

  import { PageWrapper } from '@/components/Page';
  import { useDrawer } from '@/components/Drawer';
  import DrawerGoodsDetail from './goodsDetail.vue';
  import { goodsListApi, goodsDeleteApi, setHotApi, cancelHotApi } from '@/api/goods/goods';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  const [registerGoodsDetail, { openDrawer: openDrawer, closeDrawer: closeDrawer }] = useDrawer();

  function openDetail(data: any) {
    openDrawer(true, data && data.id ? data.id : -1);
  }

  function saveSuc() {
    handleReloadCurrent();
    closeDrawer();
  }

  function setHot(code: number, id: number) {
    console.log(id);
    setHotApi(code, id).then((data: number) => {
      if (data && data > 0) {
        createMessage.success('设置成功');
        handleReloadCurrent();
      }
    });
  }

  function cancelHot(code: number, id: number) {
    console.log(id);
    cancelHotApi(code, id).then((data: number) => {
      if (data && data > 0) {
        createMessage.success('取消成功');
        handleReloadCurrent();
      }
    });
  }

  const [registerTable, { reload }] = useTable({
    title: '加载商品',
    api: goodsListApi,
    columns: getBasicColumns(),
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
    },
    pagination: { pageSize: 10 },
  });
  function handleReloadCurrent() {
    reload();
  }

  function getBasicColumns(): BasicColumn[] {
    return [
      {
        title: '商品名',
        dataIndex: 'name',
        fixed: 'left',
      },
      {
        title: '商品图片',
        dataIndex: 'imgList',
      },
      {
        title: '编号',
        dataIndex: 'id',
      },
      {
        title: '创建人',
        dataIndex: 'creatorName',
      },
      {
        title: '创建时间',
        sorter: true,
        dataIndex: 'createTime',
      },
      {
        title: '上架状态',
        sorter: true,
        dataIndex: 'statusName',
      },
    ];
  }

  function handleReload() {
    reload({ page: 1 });
  }
  function handleDelete(record: Recordable) {
    goodsDeleteApi(record).then((data: number) => {
      if (data && data > 0) {
        createMessage.success('商品已被删除');
        handleReloadCurrent();
      }
    });
  }
</script>
